<template>
  <div class="Temperature">
    <div class="leftbox">
      <el-autocomplete
      class="inline-input"
      v-model="filterText"
      style="margin-bottom: 10px;width:100%"
      :fetch-suggestions="querySearch"
      placeholder="输入关键字进行过滤"
      :trigger-on-focus="true"
      value-key="name"
      :debounce='300'
      @select="handleSelect"
    ></el-autocomplete>
      <div class="treebox">
        <el-tree
          :props="props"
          :load="loadNode"
          :highlight-current="true"
          lazy
          node-key="id"
          show-checkbox
          :default-expanded-keys="array"
          @check="handleNodeClick"
          ref="tree"
          >
          <template slot-scope="{ node, data }">
            <span :style="{ 
              color:data.collect ?'':data.className=='FactoryStation'?'#999':'',
              'font-size':data.collect ?'':data.className=='FactoryStation'?'14px':''}">
                           <img
              :src="'data:image/png;base64,' + data.iconBase64"
              style="
                width: 16px;
                height: 16px;
                margin-right: 5px;
                vertical-align: bottom;"/> {{ node.label }}</span>
          </template>
        </el-tree>
      </div>
    </div>
    <div class="rightbox">
      <div class="titlebox">
        <div>温度监测</div>
        <div class="righttitle">
          <!-- <span :style="{color:isshow?'#1890ff':'','border-bottom':isshow?'2px solid #1890ff':''}" class="wen" @click="toimg">图片</span>
          <span :style="{color:isshows?'#1890ff':'','border-bottom':isshows?'2px solid #1890ff':''}" class="text wen" @click="totab">表格</span> -->
          <i :style="{color:isshow?'#007cee':''}" @click="toimg" class="iconfont icon-zhuzhuangtutubiao"></i>
          <i :style="{color:isshows?'#007cee':''}" @click="totab" class="iconfont icon-biaoge"></i>
          <TopTile  @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile>
        </div>

      </div>
      <div class="imgandtab">
        <div class="imagebox" ref="imagebox" v-show="isshow">
          <div class="zanwu" v-if="!xunhuanlist.length">
            <el-empty description="暂无数据" :image-size="300"></el-empty>
          </div>
          <div class="littlebox" v-for="(item,index) in xunhuanlist" :key="index" @click="openechart(item)">
            <div class="device">{{ item.name }}</div>
            <el-divider></el-divider>
            <div class="chua"><span>上触头A: &nbsp;&nbsp;&nbsp;{{ item.topATemperatureValue }}</span><span>℃</span></div>
            <div class="chub"><span>上触头B: &nbsp;&nbsp;&nbsp;{{ item.topBTemperatureValue }}</span><span>℃</span> </div>
            <div class="chuc"><span>上触头C: &nbsp;&nbsp;&nbsp;{{ item.topCTemperatureValue }}</span><span>℃</span> </div>
            <div class="chua"><span>下触头A: &nbsp;&nbsp;&nbsp;{{ item.bottomATemperatureValue }}</span><span>℃</span></div>
            <div class="chub"><span>下触头B: &nbsp;&nbsp;&nbsp;{{ item.bottomBTemperatureValue }}</span><span>℃</span> </div>
            <div class="chuc"><span>下触头C: &nbsp;&nbsp;&nbsp;{{ item.bottomCTemperatureValue }}</span><span>℃</span> </div>
          </div>
        </div>
        <div class="table" v-show="isshows">
          <TableColumn
            ref="tabledata"
            :tableData="tableData" 
            :tableConfig="tableConfig" 
            :issize="issize">
            <el-table-column
              label="操作"
              align=center>
              <template #default="{row}">
                <span class="looklist" @click="openechart(row)"><i class="el-icon-view"></i></span>
              </template>
            </el-table-column>
          </TableColumn>
        </div>
      </div>
      <!-- 数据弹窗 -->
       <div><WenduDialogs ref="WenduDialog" :itemvalue="itemvalue"></WenduDialogs></div>
    </div>
  </div>
</template>

<script>
import WenduDialogs from './wendudialog.vue'
import { getgenjiedianapi, getzijidianapi } from '@/api/monitor'
import {getwendulistapi} from '@/api/energy-consumption/factory-energy/UseEnergyReport'
import {getKeywordListApi} from '@/api/Ledger'
import TopTile from '@/components/TopTitle/index.vue'
import TableColumn from '@/components/Table/index.vue'
import {exportexcel} from '@/utils/excel'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTile,
    TableColumn,
    WenduDialogs,
  },
  data() {
    return {
      isshow:true,
      isshows:false,
      filterText:'',
      data: [],
      issize: 'medium',
      props: {
        label: 'name',
        children:'sonList'
      },
      itemvalue:{},
      array: [],
      treelist:[],
      xunhuanlist: [],
      tableData: [],
      tableConfig: [
        { label: '设备名称', prop: 'name' },
        { label: '上触头A项温度(℃)', prop: 'topATemperatureValue' ,center:'right'},
        { label: '上触头B项温度(℃)', prop: 'topBTemperatureValue' ,center:'right'},
        { label: '上触头C项温度(℃)', prop: 'topCTemperatureValue' ,center:'right'},
        { label: '下触头A项温度(℃)', prop: 'bottomATemperatureValue' ,center:'right'},
        { label: '下触头B项温度(℃)', prop: 'bottomBTemperatureValue' ,center:'right'},
        { label: '下触头C项温度(℃)', prop: 'bottomCTemperatureValue' ,center:'right'},
        { label: 'A项电流(A)', prop: 'acurrentValue' ,center:'right'},
        { label: 'B项电流(A)', prop: 'bcurrentValue' ,center:'right'},
        { label: 'C项电流(A)', prop: 'ccurrentValue' ,center:'right'},
      ],
      timerId: null
    };
  },

  mounted() {
    
  },

  methods: {
    toimg() {
      this.isshow=true;
      this.isshows=false;
    },
    totab() {
      this.isshows=true;
      this.isshow=false;
    },
    // 打开弹窗
    openechart(item) {
      this.itemvalue=item
      this.$refs.WenduDialog.dialogVisible=true
      setTimeout(()=>this.$refs.WenduDialog.submit(),100)
    },
    // 树节点点击
    handleNodeClick(val) {
      this.treelist = this.$refs.tree.getCheckedNodes(false, true)
      this.getdatalist()
      // 每次点击树节点时先清除之前的定时器
      if (this.timerId) {
        clearInterval(this.timerId);
      }
      // 如果 treelist 不为空，则设置定时器每隔十秒调用 getdatalist 方法
      if (this.treelist.length > 0) {
        this.timerId = setInterval(() => {
          this.getdatalist();
        }, 10000);
      }
    },
    // 获取列表数据
    async getdatalist() {
      const array=this.treelist.filter(ele=>ele.className == "Bay")
      if (!array.length) {
        this.xunhuanlist = []
        this.tableData = []
        return
      }
      const loading = this.$loading({
        lock: true,
        text: 'loading',
        spinner: 'el-icon-loading',
        target: this.$refs.imagebox
      });
      this.$refs.tabledata.loding = true
      const classIds=array.map(ele=>ele.id)
      const classNames = array.map(ele => ele.name)
      const {data:{list}}=await getwendulistapi({classIds:classIds.join(','),classNames:classNames.join(',')})
      this.xunhuanlist = list
      this.tableData=list
      this.$refs.tabledata.loding=false
      loading.close()
    },
    // 树节点过滤
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 导出
    daochu() {
      const array=this.treelist.filter(ele=>ele.className == "Bay")
      const classIds=array.map(ele=>ele.id)
      const classNames = array.map(ele => ele.name)
      exportexcel('pio-microservice-biz/pio/ect/temperature/detection/exportExcel', {
        classIds:classIds.join(','),classNames:classNames.join(',')
      },'温度监测')
    },
    // 刷新
    shuaxin() {
      this.getdatalist()
      this.$message.success('列表刷新成功')
    },
    // 树节点懒加载
    async loadNode(node, resolve) {
      const res = await getgenjiedianapi({ treeModel: 'DeviceManageTree' })
      const ress = await getzijidianapi(res.data.list[0])
      if (node.level === 0) { // 初始的级数（最顶层）
        return resolve(ress.data.list) // 最顶层数据渲染为region
      } else if (node.level > 0) {
        const { data: { list } } = await getzijidianapi(node.data)
        return resolve(list)
      }
    },
    // 调节表格密度
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 树节点搜索
    async querySearch(queryString, cb) {
      const res = await getKeywordListApi({ name: queryString })
      const restaurants = res.data.list
      cb(restaurants)
      // 调用 callback 返回建议列表的数据
    },
    // 搜索选择
    handleSelect (item) {
      const newarr=item.pathId.split(',')
      for (let i = 0;i<newarr.length;i++) {
        if (newarr[i]) {
          this.array.push(newarr[i])
        }
      }
      function getgaoliang(that) {
        let node = that.$refs.tree.getNode(item);
        if (node) {
          that.$refs.tree.setCurrentKey(item.id);
        } else {
          setTimeout(() => {
            getgaoliang(that)
          }, 500);
        }
        }
      getgaoliang(this)
        this.handleNodeClick(item)
    },
  },
   // 组件销毁，清除定时器
   beforeDestroy() {
    clearInterval(this.timerId);
  },
  watch: {
    filterText (newValue) {
      this.filterText = newValue.replace(/^\[(.*?)\]/, '').replace(/\((.*?)\)$/, '')
    },
  },
};
</script>

<style scoped>
.Temperature{
  height: 100%;
  padding: 10px;
  display: flex;
  .leftbox{
    width: 300px;
    padding: 20px;
    margin-right: 10px;
    height: 100%;
    background-color: #fff;
    .treebox{
      height: 94%;
      overflow: auto;
      /* border-bottom: ; */
    }
  }
  .rightbox{
    width: calc(100% - 310px);
    background-color: #fff;
    padding: 20px;
    .titlebox{
      display: flex;
      justify-content:space-between;
      align-items: center;
      .righttitle{
        display: flex;
        align-items: center;
        i{
          margin-right: 15px;
          font-size: 18px;
        }
        i:hover{
        cursor:pointer ;
        color: #1890ff;
       }
      }
      .text{
        margin: 0 20px;
      }
      .wen{
        cursor:pointer ;
        padding-bottom: 2px;
      }
      .wen:hover{
        color: #1890ff;
        border-bottom: 2px solid #1890ff;
      }
    }
    .imgandtab{
      height: 96%;
      padding-top: 20px;
      .imagebox{
        height: 100%;
        overflow: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: flex-start;
        .littlebox{
          cursor: pointer;
          border: 1px solid skyblue;
          width: calc(14.28% - 10px);
          height: 250Px;
          margin: 5px;
          border-radius: 5px;
          padding:10px;
          .device{
            color: #1890ff;
            white-space: nowrap; /* 不换行 */
            overflow: hidden; /* 溢出隐藏 */
            text-overflow: ellipsis; /* 显示省略号 */
          }
          .chua{
            color: #f3be56;
            font-size: 14px;
            margin-bottom: 8px;
            display: flex;
            justify-content: space-between;
          }
          .chub{
            color: #64aa9d;
            font-size: 14px;
            margin-bottom: 8px;
            display: flex;
            justify-content: space-between;
          }
          .chuc{
            color: #ff0d18;
            font-size: 14px;
            margin-bottom: 8px;
            display: flex;
            justify-content: space-between;
          }
        }
        .zanwu{
          height: 100%;
          width:100%;
          text-align: center;
        }
      }
      .table{
        height: 100%;
        .looklist{
          color: #1890ff;
          cursor: pointer;
        }
      }
    }
  }
}
</style>